@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd">
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>商品信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" label-position="top" size="mini" :rules="rules" ref="ruleForm1">
                    <el-form-item label="商品标题" prop="title">
                        <el-input v-model="goodsDetails.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品封面图" prop="thumb">
                        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccessimg" :before-upload="beforeAvatarUpload">
                            <img v-if="goodsDetails.thumb" :src="goodsDetails.thumb" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="content">
                        <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove" :on-error='handleErro' :on-success="handleAvatarSuccess" list-type="picture" :file-list="goodsDetails.images">
                            <span class="addPicture">
                                <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                添加图片
                            </span>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                        </el-upload>
                        <el-input type="textarea" v-model="goodsDetails.content" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品类型" prop="cid" ref="ruleForm">
                                <el-cascader v-model="goodsDetails.cid" :options="typeArr"></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品类别" prop="type">
                                <el-select v-model="goodsDetails.type" placeholder="请选择">
                                    <el-option :key="2" label="实物" :value="2">
                                    </el-option>
                                    <el-option :key="1" label="非实物" :value="1">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品价格（单位：人民币 元）" prop="price">
                                <el-input v-model="goodsDetails.price"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="运费（单位：人民币 元）" prop="price">
                                <el-input v-model="goodsDetails.freight"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="库存" prop="storage">
                                <el-input v-model="goodsDetails.storage"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="link_name">
                                <el-input v-model="goodsDetails.link_name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="link_phone">
                                <el-input v-model="goodsDetails.link_phone"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="link_department">
                                <el-input v-model="goodsDetails.link_department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="link_position">
                                <el-input v-model="goodsDetails.link_position"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <button @click="submitForm('ruleForm','ruleForm1')">@{{good_id==''?'发布':'修改'}}产品</button>
    </div>
    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">
                推荐供应商
            </div>
            <div class="recommendStore_list" v-for="item in rightStore">
                <img :src="item.logo" alt="...">
                <div class="recommendStoreDetails">
                    <div class="recommendStoreDetails_name">
                        <div>@{{item.store_name}}</div>
                        <img v-if="item.quality==2" src="{{URL::asset('./img/icon/storeColloct.png')}}" alt="...">
                        <img v-if="item.hot==2" src="{{URL::asset('./img/icon/storeHot.png')}}" alt="...">

                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListTel.png')}}" alt="...">
                            @{{item.call}}
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListZan.png')}}" alt="...">
                            @{{item.praise}}
                        </span>
                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListEye.png')}}" alt="...">
                            @{{item.view}}
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListNote.png')}}" alt="...">
                            @{{item.service}}
                        </span>
                    </div>
                    <button class="recommendStoreDetails_button">
                        <a :href="'{{route('home.store.store') }}?id='+item.id"> 查看</a>
                    </button>
                </div>
            </div>
            <a style="display:block;width:100%" :href="item.link" v-for="item in imgData">
                <img :src="item.thumb" style="width:100%" alt="...">
            </a>
        </div>
    </div>
</div>
<style>
    .el-cascader--mini {
        width: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    good_id: getQueryString("goodsId"),
                    goodsDetails: {
                        title: '',
                        thumb: '',
                        images: [],
                        content: '',
                        type: '',
                        cid: [],
                        storage: 0,
                        freight: 0.00,
                        price: '',
                        link_name: '',
                        link_phone: '',
                        link_department: '',
                        link_position: '',
                    },
                    rightStore: [],
                    imgData: [],
                    typeArr: [],
                    uploadUrl: UPLOAD_FILE,
                    fileList: [],
                    imageUrl: '',
                    rules: {
                        title: [{
                            required: true,
                            message: '请输入相关信息',
                            trigger: 'blur'
                        }],
                        thumb: [{
                            required: true,
                            message: '请选择商品封面图',
                            trigger: 'blur'
                        }],
                        content: [{
                            required: true,
                            message: '请填写商品描述',
                            trigger: 'blur'
                        }],
                        type: [{
                            required: true,
                            message: '请选择商品类别',
                            trigger: 'change'
                        }],
                        cid: [{
                            required: true,
                            message: '请选择商品类型',
                            trigger: 'change'
                        }],
                        link_name: [{
                            required: true,
                            message: '请填写联系人',
                            trigger: 'change'
                        }],
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        link_department: [{
                            required: true,
                            message: '请填写部门',
                            trigger: 'change'
                        }],
                        link_position: [{
                            required: true,
                            message: '请填写职位',
                            trigger: 'change'
                        }],
                        price: [{
                            required: true,
                            validator: validatePrice,
                            trigger: 'blur'
                        }],
                        storage: [{
                            required: true,
                            validator: validatePositiveNum,
                            trigger: 'blur'
                        }],


                    }
                }
            },
            created() {
                if (getQueryString("goodsId")) {
                    this.getDetails();
                }
                let data = {
                    type: 2
                }
                apiAjax("{{ route('home.public.category')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.typeArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                apiAjax("{{ route('home.store.rightStoreApi')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.rightStore = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 22
                }, (res) => {
                    if (res.code == 0) {
                        this.imgData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                getDetails() {
                    let data = {
                        good_id: this.good_id
                    }
                    apiAjax("{{ route('home.user.supplierGoodsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.goodsDetails = res.data;
                            this.goodsDetails.images = res.data.images;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitForm(formName, formName1) {
                    this.$refs[formName1].validate((valid) => {
                        if (valid) {
                            this.$refs[formName].validate((valid) => {
                                if (valid) {
                                    let data = {
                                        good_id: this.good_id,
                                        thumb: this.goodsDetails.thumb,
                                        title: this.goodsDetails.title,
                                        cate_pid: this.goodsDetails.cid[0],
                                        cate_id: this.goodsDetails.cid[1],
                                        type: this.goodsDetails.type,
                                        content: this.goodsDetails.content,
                                        images: this.goodsDetails.images.join(),
                                        price: this.goodsDetails.price,
                                        link_name: this.goodsDetails.link_name,
                                        link_phone: this.goodsDetails.link_phone,
                                        link_department: this.goodsDetails.link_department,
                                        link_position: this.goodsDetails.link_position,
                                        storage: this.goodsDetails.storage,
                                        freight: this.goodsDetails.freight,
                                    }
                                    apiAjax("{{ route('home.user.supplierGoodsUpdateApi')}}", 'post', data, (res) => {
                                        if (res.code == 0) {
                                            this.$message({
                                                message: res.msg,
                                                type: 'success'
                                            });
                                            window.location.href = "{{ route('home.suppliermy.supplierGoods') }}";

                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: 'warning'
                                            });
                                        }
                                    }, (erro) => {

                                    });
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            return false;
                        }
                    });

                },

                handleErro() {
                    this.$message.error('上传失败');
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleAvatarSuccessimg(res, file) {
                    this.goodsDetails.thumb = file.response.data.path;
                },
                handleAvatarSuccess(res, file) {
                    this.goodsDetails.images.push(res.data.path)
                    // this.goodsDetails.images.push(URL.createObjectURL(file.raw))
                },
                handleRemove(file, fileList) {
                    this.goodsDetails.images = [];
                    fileList.forEach(element => {
                        this.goodsDetails.images.push(element.response.data.path)
                        // this.goodsDetails.images.push(element.url)
                    });
                },
            }
        })
    })
</script>
@endsection